<%--
  Created by IntelliJ IDEA.
  User: 94708
  Date: 2018/8/14
  Time: 20:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>坯布准备</title>
    <link rel="stylesheet" href="../static/layui-2.3.0/css/layui.css">

    <link href="../static/bootstrap-4.1.1/bootstrap.min.css"
          rel="stylesheet">

    <style type="text/css">
        #form-pro-query .layui-form-label {
            width: auto;
            padding-left: 5px;
            padding-right: 5px;
        }
    </style>
</head>
<body>
<div style="padding: 5px 0 20px 3px;">
            <span class="layui-breadcrumb" lay-separator="-"> <a href="#">生产过程管理</a>
                <a><cite>坯布准备</cite></a>
            </span>
</div>

<form class="layui-form" id="form-pro-query">
    <div class="layui-form-item">
        <div class="layui-inline">

            <label class="layui-form-label">投坯状态</label>
            <div class="layui-input-inline" style="width: 100px;">
                <!-- 00-未确定 22-确定 55-启用 77-禁用 99-逻辑删除 -->
                <select name="process_status" lay-verify="required" lay-filter="select-pro-query-pro-status">
                    <option value="">全部</option>
                    <option value="00">未投坯</option>
                    <option value="05">已投坯</option>
                </select>
            </div>

            <label class="layui-form-label">组号</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="number" name="process_id" autocomplete="off"
                       class="layui-input">
            </div>

            <label class="layui-form-label">计划编号</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="number" name="plan_id" autocomplete="off"
                       class="layui-input">
            </div>

            <label class="layui-form-label">客户</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="process_cus" autocomplete="off"
                       class="layui-input">
            </div>

            <label class="layui-form-label">规格</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="process_std" autocomplete="off"
                       class="layui-input">
            </div>

            <label class="layui-form-label">花色</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="process_color" autocomplete="off"
                       class="layui-input">
            </div>

            <label class="layui-form-label">分组量</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="group_num" autocomplete="off"
                       class="layui-input">
            </div>
            <label class="layui-form-label">分组日期</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="group_date" autocomplete="off"
                       class="layui-input">
            </div>
            <label class="layui-form-label">分组登记人</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="group_person" autocomplete="off"
                       class="layui-input">
            </div>

            <button class="layui-btn" id="bn-pro-query"><i class="layui-icon layui-icon-search"></i> 查询</button>
        </div>
    </div>
</form>

<div class="layui-btn-container">
    <button type="button" class="layui-btn" id="bn-pro-add-multi"><i class="layui-icon">&#xe608;</i> 新增</button>
    <button type="button" class="layui-btn" id="bn-pro-cfm-multi"><i class="layui-icon layui-icon-ok-circle"></i> 确定
    </button>
    <button class="layui-btn layui-btn-danger" id="bn-pro-del-multi"><i class="layui-icon layui-icon-delete"></i> 删除
    </button>
</div>


<script type="text/html" id="barDemo1">
    {{#  if(d.process_status == '00' ){ }}
    <a class="layui-btn layui-btn-xs" lay-event="pro_edit"><i class="layui-icon">&#xe608;</i> 编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="pro_cfm"><i class="layui-icon layui-icon-ok-circle"></i> 确定</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="pro_del"><i class="layui-icon layui-icon-delete"></i>
        删除</a>
    {{#  }}}
</script>


<table id="process-raw-table" lay-filter="rawtable"></table>

<div style="display: none" id="div-manager">

    <table id="plan-man-table" lay-filter="mantable"></table>

</div>


<script src="../static/js/jquery-3.3.1.min.js"></script>
<script src="../static/bootstrap-4.1.1/bootstrap.min.js"></script>
<script src="../static/layui-2.3.0/layui.js"></script>
<script src="../static/js/sweetalert-2.1.0.min.js"></script>
<script src="../static/js/common.js"></script>
<script type="text/javascript">
    var proTable;
    layui.use(['element', 'table', 'layer', 'form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        //第一个实例
        proTable = table.render({
            elem: '#process-raw-table',
            url: 'rawcloth', //数据接口
            page: true, //开启分页
            limits: [5, 10, 20, 30],
            limit: 5,
            cols: [[ //表头
                {
                    type: 'checkbox'
                }
                ,
                {
                    field: 'process_id',
                    title: '组号',
                    sort: true,
                    width: 80
                }
                ,
                {
                    field: 'plan_id',
                    title: '计划编号',
                    sort: true,
                    width: 120
                }
                ,
                {
                    field: 'process_cus',
                    title: '客户',
                    width: 120
                }
                ,
                {
                    field: 'process_std',
                    title: '规格',
                    width: 120
                }
                ,
                {
                    field: 'process_color',
                    title: '花色'
                }
                ,
                {
                    field: 'group_num',
                    title: '分组量'
                }
                ,
                {
                    field: 'group_date',
                    title: '分组日期'
                }
                ,
                {
                    field: 'group_person',
                    title: '分组登记人'
                }
                ,
                {
                    field: 'process_status',
                    width: 80,
                    title: '状态',
                    templet: function (d) {
                        if (d.process_status == '00') {
                            return '未投坯';
                        }
                        if (d.process_status == '05') {
                            return '已投坯';
                        }

                    }
                }
                ,
                {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo1'

                }

            ]]
        });


        //监听工具条
        table.on('tool(rawtable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'pro_edit') { //修改
                $('#bn-doadd-pro').hide();
                $('#bn-doupdate-pro').show();
                //优化1.1
                opr.ajax({
                    url : 'rawcloth/' + data.process_id,
                    method : 'get',
                    layer : layer,
                    responseOkHandler : function(cus) {
                        //form-cus-upd是表单的lay-filter值
                        form.val("form-plan", cus);

                        layerIdx = layer.open({
                            type : 1,
                            title : '修改计划信息',
                            area : [ '600px', '700px' ],
                            content : $('#div-add-paln'),
                            zIndex : 100 //将层次降低，以使sweetalert能够在layer之上
                        });

                    }
                });

                //修改
                form.on('submit(bn-doupdate-pro)', function(data) {

                    //优化1.1
                    opr.ajax({
                        url : 'rawcloth',
                        // data: data.field,
                        data : JSON.stringify(data.field), //处理为json格式
                        contentType : 'application/json;charset=UTF-8',
                        method : 'put',
                        dataType : 'json',
                        layer : layer,
                        layuiTableIns :proTable,
                        responseOkHandler : function(result) { //关闭当前的模态框（修改必须要加添加）
                            layer.close(layerIdx);
                            return true; //返回true,继续默认后续行为
                        }
                    });
                    return false;
                });

            } else if (layEvent === 'pro_cfm') {//确定
                opr.ajaxWithConfirm({
                    title: "您确实要确定该投坯信息吗?",
                    text: "投坯信息一旦确定将无法编辑!",
                    url: 'rawcloth/status/' + data.process_id + '/05',
                    method: 'put',
                    layer: layer,
                    layuiTableIns: proTable
                });

            } else if (layEvent === 'pro_del') {//删除
                opr.ajaxWithConfirm({
                    title: "您确实要删除该条数据吗?",
                    text: "数据一旦删除将无法恢复!",
                    url: 'rawcloth/' + data.process_id,
                    method: 'delete',
                    layer: layer,
                    layuiTableIns: proTable
                });
            }


            $("#group_num").keyup(function () {
                var _group_num = parseFloat($("#group_num").val());
                var _plan_residue = parseFloat($("#plan_residue").val());
                if (_group_num > _plan_residue) {
                    $("#group_num").val(_plan_residue);
                }

            })

        });


        //批量删除
        $("#bn-pro-del-multi").click(function () {
            var checkStatus = table.checkStatus('process-raw-table'); //test即为基础参数id对应的值
            console.log(checkStatus.data); //获取选中行的数据
            //console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
            //console.log(checkStatus.isAll ) //表格是否全选
            var arr = [];
            $.each(checkStatus.data, function () {
                arr.push(this.process_id);
            });


            //优化1.1
            opr.ajaxWithConfirm({
                url: 'rawcloth',
                data: JSON.stringify(arr),
                contentType: "application/json;charset=UTF-8",
                method: 'delete',
                dataType: 'json',
                title: "您确实要删除选择的数据吗?",
                text: "数据一旦删除将无法恢复!",
                layer: layer,
                layuiTableIns: proTable,
            });
        });


        //批量修改
        //确定多条数据
        $('#bn-pro-cfm-multi').click(function () {

            changeMultiCusStatus('您确实要确定选择的投坯信息吗？', '投坯信息一旦被确定，将不能再被编辑！', '05', "process-raw-table", proTable);

        });
        //函数：改变多个客户信息状态
        /*
        {
            title:"标题";
            text:"提示信息";
            status:"要修改的状态";
            tableID:"数据表格id";
            Table:"";
        }
        */
        function changeMultiCusStatus(title, text, status, tableID, Table) {
            var checkStatus = table.checkStatus(tableID); //基础参数id对应的值
            console.log(checkStatus.data) //获取选中行的数据(数组)
            //console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
            //console.log(checkStatus.isAll ) //表格是否全选

            if (checkStatus.data.length == 0) {
                swal({
                    text: '您没有选择任何数据！',
                    icon: "error",
                    buttons: false,
                    timer: 1500
                });
                return;
            }

            var arr = [];
            $.each(checkStatus.data, function () {
                arr.push(this.process_id);
            });

            //优化1.1
            opr.ajaxWithConfirm({
                title: title,
                text: text,
                url: 'rawcloth/status/' + status,
                data: JSON.stringify(arr),
                contentType: 'application/json;charset=UTF-8',
                method: 'put',
                layer: layer,
                layuiTableIns: proTable,
            });

        }

        form.on('select(select-pro-query-pro-status)', function (data) {
            $("#bn-pro-query").click();
        });

        //条件查询
        $("#bn-pro-query").click(function () {
            //将表单对象封装成json对象
            var arr = $("#form-pro-query").serializeArray();
            var params = {};
            /*
            {
                co_id:8888,
                co_name:'mmmm'
            }
             */
            for (var i = 0; i < arr.length; i++) {
                params[arr[i].name] = arr[i].value;
            }
            //这里以搜索为例
            proTable.reload({
                where: params
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            //重设按钮
            showBns();
            return false;
        });


        //添加弹框
        var layerIdx;
        $("#bn-pro-add-multi").click(function () {

            layerIdx = layer.open({
                type: 1,
                title: '计划维护信息',
                area: ['850px', '400px'],
                content: $('#div-manager'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                zIndex: 100

            });
        });


        //显示按钮是否可用
        function showBns() {
            var _process_status = $("#form-pro-query select[name=process_status]").val();
            if (_process_status == '') {
                //add(添加)--cfm(确定)--use(启用)--unuse(禁用)--del(删除)
                <!-- 00-未确定 22-确定 55-启用 77-禁用 99-逻辑删除 -->//////prop("disabled",true).addClass("layui-btn-disabled")先设置不可点击(true)+禁用样式
                $("#bn-pro-add-multi,#bn-pro-cfm-multi,#bn-pro-del-multi").prop("disabled", true).addClass("layui-btn-disabled");
            } else if (_process_status == '00') {
                $("#bn-pro-add-multi,#bn-pro-cfm-multi,#bn-pro-del-multi").prop("disabled", false).removeClass("layui-btn-disabled");
            } else if (_process_status == '05') {
                $("#bn-pro-add-multi,#bn-pro-cfm-multi,#bn-pro-del-multi").prop("disabled", true).addClass("layui-btn-disabled");
            }
        }

        showBns();
    });


    var manTable;
    layui.use(['element', 'table', 'layer', 'form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        //第一个实例
        manTable = table.render({
            elem: '#plan-man-table',
            url: 'plan', //数据接口
            page: true, //开启分页
            limits: [5, 10, 20, 30],
            limit: 5,
            cols: [[ //表头

                {
                    field: 'plan_id',
                    title: '计划编号',
                    sort: true,
                    width: 120
                }
                , {
                    field: 'co_name',
                    title: '花色',
                    width: 120
                    // edit : 'text'
                }
                , {
                    field: 'cus_name',
                    title: '客户',
                    width: 120
                    // edit : 'text'
                }
                , {
                    field: 'standard_name',
                    title: '规格',
                    width: 120
                    // edit : 'text'
                }, {
                    field: 'plan_num',
                    title: '计划数量',
                    width: 120
                    // edit : 'text'
                }
                , {
                    field: 'plan_residue',
                    title: '可选数量',
                    width: 120
                    // edit : 'text'
                },
                {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo2',
                    width: 120

                }


            ]]
        });

        var layerIdx;
        //监听工具条
        table.on('tool(mantable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'add-pro') { //投坯

                $('#bn-doadd-pro').show();
                $('#bn-doupdate-pro').hide();
                form.val("form-plan", {
                    "group_num": "",
                    "group_date": "",
                    "group_person": ""
                });

                opr.ajax({
                    url: 'plan/' + data.plan_id,
                    method: 'get',
                    layer: layer,
                    responseOkHandler: function (cus) {
                        //form-cus-upd是表单的lay-filter值
                        form.val("form-plan", cus);
                        layerIdx = layer.open({
                            type: 1,
                            title: '添加分组信息',
                            area: ['600px', '700px'],
                            content: $('#div-add-paln'),
                            zIndex: 110 //将层次降低，以使sweetalert能够在layer之上
                        });

                    }
                });
            }

            $("#group_num").keyup(function () {
                var _group_num = parseFloat($("#group_num").val());
                var _plan_residue = parseFloat($("#plan_residue").val());
                if (_group_num > _plan_residue) {
                    $("#group_num").val(_plan_residue);
                }

            })
        });

        form.on('submit(bn-doadd-pro)', function (data) {
            //优化1.1
            opr.ajax({
                url: "rawcloth",
                data: data.field,
                method: "post",
                dataType: 'json',
                layer: layer,
                layuiTableIns: manTable,
                layuiTable: proTable,
                responseOkHandler: function (result) {
                    layer.close(layerIdx);
                    return true; //返回true,继续默认后续行为
                }
            });
            return false;
        });

    });


</script>

<script type="text/html" id="barDemo2">
    <a class="layui-btn layui-btn-xs" lay-event="add-pro"><i class="layui-icon layui-icon-ok-circle"></i> 投坯</a>
</script>


<!--弹出窗口内容  -->
<div style="padding:20px; width:320px; display:none" id="div-add-paln">
    <form class="layui-form" lay-filter="form-plan">

        <div class="layui-form-item" id="plan_id">
            <input type="hidden" name="process_id" autocomplete="off"
                   class="layui-input">
            <label class="layui-form-label">计划编号</label>
            <div class="layui-input-block">
                <input type="text" name="plan_id" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">规格</label>
            <div class="layui-input-block">
                <input type="hidden" name="standard_id" autocomplete="off"
                       class="layui-input">
                <input type="text" name="standard_name" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户</label>
            <div class="layui-input-block">
                <input type="hidden" name="cus_id" autocomplete="off"
                       class="layui-input">
                <input type="text" name="cus_name" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">花色</label>
            <div class="layui-input-block">
                <input type="hidden" name="co_id" autocomplete="off"
                       class="layui-input">
                <input type="text" name="co_name" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">总量</label>
            <div class="layui-input-block">
                <input type="text" name="plan_num" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">剩余量</label>
            <div class="layui-input-block">
                <input type="text" name="plan_residue" autocomplete="off" id="plan_residue"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">分组量</label>
            <div class="layui-input-block">
                <input type="text" name="group_num" autocomplete="off" id="group_num"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">日期</label>
            <div class="layui-input-block">
                <input type="date" name="group_date" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">登记人</label>
            <div class="layui-input-block">
                <input type="text" name="group_person" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="bn-doadd-pro" lay-submit
                        lay-filter="bn-doadd-pro">提交
                </button>
                <button class="layui-btn" id="bn-doupdate-pro" lay-submit
                        lay-filter="bn-doupdate-pro">提交
                </button>
            </div>
        </div>

    </form>
</div>

</body>
</html>
